<template>
  <view class="page" v-if="shenheStatus != 1 || !shenheAliStatus">
    <view class="content bgf">
      <view class="textarea">
        <u-input
          class="textarea"
          v-model="desc"
          type="textarea"
          placeholder="凭证备注～"
        ></u-input>
      </view>
      <toolsFile
        :fileList="pic_url"
        :max="9"
        @success="(e) => pic_url.push({ url: e })"
        @remove="(i) => pic_url.splice(i, 1)"
      ></toolsFile>
    </view>

    <!-- <view class="money bgf">
      <view class="let">转账金额</view>
      <view class="rig">
        <u-input
          input-align="right"
          :value="getPrice"
          type="digit"
          placeholder="请输入金额"
          :height="80"
          @blur="setPrice"
          :clearable="false"
        ></u-input>
      </view>
    </view> -->
    <view class="pof safe-area-inset-bottom">
      <view class="btn"><view @click="submit">确认上传</view></view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsFile from "@/components/tools/tools-file";
import { payOfflineAdd } from "@/api/pay";

export default {
  components: { Shenhe, toolsFile },

  data() {
    return {
      money: "",
      desc: "",
      pic_url: [],
      type: "",
      order_id: ""
    };
  },

  computed: {
    getPrice() {
      if (this.money) return "¥" + this.money;

      return "";
    }
  },

  onLoad({ type, order_id }) {
    this.type = type;
    this.order_id = order_id;
  },

  methods: {
    setPrice(e) {
      e = e.replace("¥", "");

      if (!e) this.money = "";
      this.money = parseFloat(e).toFixed(2);
    },

    submit() {
      this.$u.throttle(async () => {
        let { pic_url, desc, type, order_id } = this;
        if (!desc) return this.$u.toast("请填写描述");
        if (!pic_url.length) return this.$u.toast("请上传凭证");

        const params = {
          pay_type: 11,
          pay_offline: {
            pic_list: pic_url.map((el) => el.url),
            desc,
            type
          },
          order_id
        };
        // #ifdef MP
        params._from = "mini";
        // #endif
        // #ifdef APP-PLUS
        params._from = "app";
        // #endif
        // #ifdef web
        params._from = "h5";
        // #endif

        const res = await this.$allrequest.order.payData(params, true);
        if (!res.code) {
          this.$utils.showModal("提示", "上传成功", false, () => {
            this.$utils.toUrl("/order/order/order", "reLaunch");
          });
          return;
        }

        this.$u.toast(res.msg);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: #f2f2f2;
  min-height: 100vh;
  padding: 44rpx 24rpx 0;
}

.bgf {
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 20rpx;
}

.content {
  padding: 30rpx 24rpx;
}

.money {
  display: flex;
  align-items: center;
  padding: 0 24rpx;

  .let {
    margin-right: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .rig {
    flex: 1;
    overflow: hidden;

    ::v-deep {
      .u-input__input {
        color: #f0250e;
      }
    }
  }
}

.pof {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;

  .btn {
    padding: 12rpx 36rpx;

    view {
      height: 76rpx;
      line-height: 76rpx;
      overflow: hidden;
      text-align: center;
      background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
      border-radius: 32px;
      font-size: 26rpx;
      color: #fff;
    }
  }
}

.textarea {
  height: 200rpx;
  width: 100%;
}
</style>
